@import './variables.module.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';
@import './ruoyi.scss';
@import './font.scss';
:root {
  --base-font-family: "HarmonyOS_Medium", Helvetica, Arial, sans-serif;
  --table-header-bg-color: #E8F2FF;
  --table-header-text-color: #333;
  --table-strap-bg-color: #EDF5FF;
  --table-strap-text-color:#303133;
  --custom-component-bg-color: #E8F2FF;
  --custom-component-text-color: var(--el-color-primary);
  //--vxe-ui-font-family: --base-font-family !important;
  &::view-transition-old(root),
  &::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: none;
  }

  &::view-transition-old(root) {
    z-index: 1;
  }

  &::view-transition-new(root) {
    z-index: 9999;
  }

  --g-box-shadow-color: rgb(0 0 0 / 12%);

  &.dark {
    &::view-transition-old(root) {
      z-index: 9999;
    }

    &::view-transition-new(root) {
      z-index: 1;
    }
    --table-header-bg-color: #36373E;
    --table-header-text-color: #fff;
    --table-strap-bg-color: #404148;
    --table-strap-text-color:#fff;

    --el-bg-color: #1d2124 !important;
    --g-box-shadow-color: rgb(0 0 0 / 72%);
  }
}

:root:root {
  --el-color-warning: #FF8F1F;

  .el-segmented {
    --el-segmented-item-selected-bg-color: #fff;
    --el-segmented-item-selected-disabled-bg-color: #f2f2f2;
  }
}


body {
  height: 100%;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  //font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-family: var(--base-font-family);
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

html,body,#app{
  font-size: 16px;
}
img, svg, video, canvas, audio, iframe, embed, object {
  display: inline-block;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

aside {
  background: #eef1f6;
  padding: 8px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  //font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

//main-container全局样式
.app-container {
  padding: 20px 13px;
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

.pagination-container {
  margin-top: 30px;
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  .subtitle {
    font-size: 20px;
    color: #fff;
  }

  &.draft {
    background: #d0d0d0;
  }

  &.deleted {
    background: #d0d0d0;
  }
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

//elemnt-ui样式

.arrow-form {
  .el-card__body {
    padding-bottom: 2px;
  }
}

.el-card {
  border: none !important;
}

.app-white {
  background: var(--el-bg-color);
}

.el-page-header__back {
  &:hover {
    color: var(--el-color-primary);
    transition: 0.3s;
  }
}
.dialog-header{
  width: 180px;
  height: 0;
  border-width: 0px 45px 45px 0px;
  border-style: none solid solid;
  border-color: transparent transparent var(--el-color-primary);
  color: #fff;
  display: flex;
  justify-content: center;
}
//el-button 样式



.el-button--primary.is-plain,
.el-button--success.is-plain,
.el-button--warning.is-plain,
.el-button--danger.is-plain,
.el-button--info.is-plain {
  background-color: transparent !important;
}

.el-primary-icon-round {
  border-radius: 50%;
  background: var(--el-color-primary);
  color: #fff;
  width: 16px;
  height: 16px;

  svg {
    font-size: 10px;
  }
}

.el-button--primary.is-plain:hover {
  color: var(--el-color-primary);
}

.el-button--success.is-plain:hover {
  color: var(--el-color-success);
}

.el-button--warning.is-plain:hover {

  color: var(--el-color-warning);
}

.el-button--danger.is-plain:hover {
  color: var(--el-color-danger);
}

.el-button--info.is-plain:hover {
  color: var(--el-color-info);
}

.el-gradient-primary {
  background: transparent linear-gradient(129deg, #5BBDFF 0%, #3C9AFF 59%, #0E6CFF 100%) !important;
  color: #fff;
  border: none;
  &.is-disabled{
    background: transparent linear-gradient(129deg, rgba(91, 189, 255, 0.5) 0%, rgba(60, 154, 255, 0.5) 59%, rgba(14, 108, 255, 0.5) 100%) !important;
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    opacity: 0.5; /* 降低透明度，表示不可用 */
  }
}

.el-gradient-danger {
  background: transparent linear-gradient(136deg, #FF8A92 0%, #FF5854 57%, #FF1526 100%);
  color: #fff;
  border: none;
}

.el-gradient-warning {
  background: transparent linear-gradient(48deg, #FFC8A9 0%, #FF7628 100%) !important;
  color: #fff;
  border: none;
}
.el-gradient-success {
  background: transparent linear-gradient(136deg, #A7FFEB 0%, #6EE2D3 100%) !important;
  color: #fff;
  border: none;
}
.el-gradient-purple{
  background: transparent linear-gradient( 48deg, #BDA9FF 0%, #5228FF 100%) !important;
  color: #fff;
  border: none;
   transition: background-color 0.3s ease;
  &.is-disabled {
    background: transparent linear-gradient( 48deg, rgba(189, 169, 255, 0.5) 0%, rgba(82, 40, 255, 0.5) 100%) !important;
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    opacity: 0.5; /* 降低透明度，表示不可用 */
  }
}
.el-gradient-pink {
  background: linear-gradient(133deg, #F1A3FF 0%, #FF15BF 100%) !important;
  color: #fff;
  border: none;
  transition: background-color 0.3s ease;

  &.is-disabled {
    background: linear-gradient(133deg, rgba(241, 163, 255, 0.5) 0%, rgba(255, 21, 191, 0.5) 100%) !important;
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    opacity: 0.5; /* 降低透明度，表示不可用 */
  }
}
.dialog-h-full{
  .el-dialog__body{
    height: 100%;
  }
}
.card-header {
  display: flex;
  align-items: center;
  height: 50px;
  font-size: 15px;
  font-weight: 700;
  padding: 0 20px;
  color: var(--el-text-color);
}
.custom-dialog.el-dialog{
  padding: 0;
  .el-dialog__header{
    background: #E8F2FF;
    padding-bottom: 0px;
    margin-bottom: 10px;
  }
  .el-dialog__body{
    padding: var(--el-dialog-padding-primary);
  }
}
//el-segmented 样式

.el-segmented__item.is-selected {
  color: #000 !important;
}

.el-segmented__group {
  padding: 2px;
}

.el-segmented__item-selected {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

//dialog 样式
@keyframes dialog-open {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dialog-close {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

.dialog-fade-enter-active {
  .el-dialog {
    animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
  }
}

.dialog-fade-leave-active {
  .el-dialog {
    animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }
}

//vxe-table
.headerCellClass {
  background: var(--table-header-bg-color);

  .vxe-cell--title {
    color: var(--table-header-text-color);
  }
}

.headerCellContractClass{
  background: var(--table-header-bg-color);
  .vxe-cell--title {
    color: var(--el-color-primary);
  }
}

.vxe-pager.is--perfect {
  border: none !important;
  background-color: transparent !important;
  margin-top: 10px;
}

.vxe-pager--num-btn {
  border-color: transparent !important;
}

.vxe-body--row.row--stripe {
  background-color: var(--table-strap-bg-color) !important;
  color: var(--table-strap-text-color);
}

.vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon{
  font-weight: normal !important;
}

.vxe-table--render-default.border--default .vxe-header--column, .vxe-table--render-default.border--default .vxe-body--column, .vxe-table--render-default.border--default .vxe-footer--column, .vxe-table--render-default.border--inner .vxe-header--column, .vxe-table--render-default.border--inner .vxe-body--column, .vxe-table--render-default.border--inner .vxe-footer--column{
  background-image: none !important;
}

.vxe-pager .vxe-pager--jump-prev, .vxe-pager .vxe-pager--prev-btn, .vxe-pager .vxe-pager--next-btn, .vxe-pager .vxe-pager--jump-next, .vxe-pager .vxe-pager--num-btn{
  background: #F7FAFF !important;
  border-radius:5px !important;
}

.vxe-pager--num-btn
{
  &:hover{
    background: var(--el-color-primary) !important;
    color: #fff !important;
    transition: all .3s ease;
  }
}

.vxe-pager--num-btn.is--active{
  background: var(--el-color-primary) !important;
  color: #fff !important;
  transition: all .3s ease;
}

.vxe-grid--pager-wrapper{
  margin-top: 7px;
}

/* 修改vxe-table滚动条样式 */
.vxe-table--body-wrapper::-webkit-scrollbar {
  height: 10px;
}
.vxe-table--body-wrapper::-webkit-scrollbar-track {
  border-radius: 2px;
}
.vxe-table--body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  transition: background-color 0.3s ease, border-radius 0.3s ease; /* 动画效果 */
}

.linear-header{
  color: var(--el-color-primary);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  font-weight: bold;
  width: 100%;
  span{
    position: relative;
    width: 45%;
    text-align: center;
    &:after, &:before{
      position: absolute;
      content: "";
      background: linear-gradient(63deg, rgb(232, 242, 255), var(--el-color-primary));
      width: 150px;
      height: 2px;
      top: 50%;
      transform: translateY(-50%);
    }
    &:before{
      left: 0;
      margin-left: 1px; /* Adjust as needed */
      transform: rotate(180deg);
    }
    &:after{
      right: 0;
      margin-right: 1px; /* Adjust as needed */
    }
  }
}

// 自定义message-box样式
.custom-useMessage-box{
  .el-message-box__header{
    .el-message-box__title{
      justify-content: start;
      .el-message-box__status{
        display: none;
      }
    }
  }
  .el-empty{
    padding:0px  10px ;
  }
  .el-message-box__btns{

  }
}

// 自定义drawer样式
.custom-drawer {
  .el-drawer__header {
    margin-bottom: 0px;
    padding: 0;
    background: #E8F2FF;

    .dialog-header {
      flex: none;
    }
  }

  .el-drawer__footer {
    box-shadow: var(--el-box-shadow);
    padding: 10px var(--el-drawer-padding-primary);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 自定义collapse样式
.custom-collapse {
  border-radius: 5px;
  .el-collapse-item__header{
    background-color: var(--custom-component-bg-color);
    padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: var(--custom-component-text-color);
  }

  .el-collapse-item__wrap{
    background-color: #FAFAFA;
    border-bottom: none;
    padding: 10px;
  }
}

.el-select__wrapper{
.el-select__icon{
  transform: rotate(-88deg);
  transition: transform 0.3s ease;
}
  &.is-focused{
    .el-select__icon{
      transform: rotate(0deg);
    }
  }
}
.el-cascader{
  .el-input__icon{
    transform: rotate(-88deg);
    transition: transform 0.3s ease;
  }
  .is-focus{
    .el-input__icon{
      transform: rotate(0deg) !important;
    }
  }
}

.el-sub-menu{
  .el-sub-menu__icon-arrow{
    transform: rotateZ(-90deg) !important;
    transition: transform 0.3s ease;
  }
  &.is-opened{
    .el-sub-menu__icon-arrow{
      transform: rotateZ(0deg) !important;
    }
  }
}


.vxe-table--tooltip-wrapper {
  z-index: 10000 !important;
}
